<template>
  <div class="page-controller">
    <div v-show="LOADING" class="spinner flex-col-c-c">
      <VueSpinnerPuff size="40" color="#3f51b5" class="spinner-inner" />
    </div>

    <the-nav-bar />
    <router-view />
    <!-- 更新检测组件 -->
    <VersionPolling />
  </div>
</template>

<script setup>
import { provide, ref, computed, onMounted, nextTick, getCurrentInstance } from 'vue';
import VersionPolling  from './components/VersionPolling/index.vue';
import { getUrlKey } from '@/utils/util';


/*
全局loading
*/
const LOADING = ref(false);
provide('LOADING', LOADING);

// const statusBarHeight = ref(Number(getUrlKey('statusBarHeight')));
// const platform = ref(getUrlKey('platform'));
// provide('statusBarHeight', statusBarHeight);
// provide('platform', platform);

// const toolHeight = computed(() => {
//   return statusBarHeight.value + 'px';
// });

// document.documentElement.style.setProperty('--van-notify-padding', `${toolHeight.value} 0 0 0`);

/*
  lottie 动画
*/

// onMounted(() => {
//   nextTick(() => {
//     var animation = window.bodymovin.loadAnimation({
//       container: document.getElementById('loading-spinner'),
//       renderer: 'svg',
//       loop: true,
//       autoplay: true,
//       path: '/home-loading.json'
//     });

//     animation.play();
//   });
// });
</script>

<style lang="scss" scoped>
.spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #ffffffd1;
  z-index: 99999;
}
</style>
